<template>
  <div>
    <p>vue3--Demo(使用setup语法糖)--组件provide&inject</p>
    <a-divider>组件--子孙组件，无限极的数据向子孙级组件单向传递</a-divider>
    <p
      >根组件--数据信息：dataFlag:{{ dataFlag }} color:{{ color }} fixModelData:{{
        fixModelData
      }}timeFlagData:{{ timeFlagData }}</p
    >
    <a-space size="middle">
      <a-button type="primary" @click="color = 'red'">红色</a-button>
      <a-button type="primary" @click="color = 'blue'">蓝色</a-button>
      <a-button type="primary" @click="color = 'green'">绿色</a-button>
      <a-button type="primary" @click="generateData"
        >先点击此按钮自动生成传递至子组件的数据</a-button
      >
    </a-space>
    <a-divider>组件--子孙组件，以下部分为子组件部分</a-divider>
    <Demo32Son1 />
  </div>
</template>
<script setup lang="ts">
  console.log('vue3--Demo(使用setup语法糖)--组件provide&inject--根组件--setup 语法糖 执行了。');

  import { defineComponent, ref, reactive, provide } from 'vue';
  import { DataModel, TimeAndFlagDataModel } from './data';
  import { message } from 'ant-design-vue';

  //引入子组件
  import Demo32Son1 from './Demo32Son1.vue';

  //定义传递给子组件的数据
  const dataFlag = ref<boolean>(true);
  const color = ref('red');
  const fixModelData: DataModel = reactive({
    id: '初始化ID值',
    name: '初始化name值',
    flag: true,
  });
  const timeFlagData: TimeAndFlagDataModel = reactive({
    time: new Date(),
    flag: new Date().getSeconds() % 3 > 1,
  });
  function generateData() {
    dataFlag.value = !dataFlag.value;
    fixModelData.id = '改变后的ID值';
    fixModelData.name = '改变后的name值';
    fixModelData.flag = !fixModelData.flag;

    var now = new Date();
    timeFlagData.time = now;
    timeFlagData.flag = now.getSeconds() % 3 > 1;
  }

  //测试在父组件中提供方法给子孙组件调用
  function testProvideMethod() {
    message.info('根组件中提供的方法弹出的提示信息', 5);
  }

  //使用provide向子孙组件提供数据
  //测试子孙组件中指定默认值，在此设置不使用provide提供数据
  // provide('color', color);
  provide('dataFlag', dataFlag);
  provide('data1', fixModelData);
  provide('data2', timeFlagData);
  provide('testProvideMethod', testProvideMethod);
</script>
<style scoped></style>
